<template>
    <div class="UpdateLogBG">
        <div class="UpdateLogTittle">
            <div class="UpdateLogMess">
                <p>更新日志内容</p>
                <p>总条目数:{{ UpdateLog.length }}</p>
                <p>当前选中条目数:{{ ChooseList.length }}</p>
            </div>
            <div style="display: flex;">
                <el-button :icon="Delete" @click="delAllUpdateLog" type="danger" class="el_button_danger">
                    批量删除
                </el-button>
                <el-button :icon="Plus" @click="dialogFlag = true, createFlag = true" type="primary"
                    class="el_button_primary">
                    新增内容
                </el-button>
            </div>
        </div>

        <div class="UpdateLogTableBorder">
            <el-table class="UpdateLogTable el_table" @select="changeCheckbox" @select-all="changeCheckbox"
                :data="UpdateLog" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" align="center" label="更新id" />
                <el-table-column prop="logVersion" align="center" label="更新" />
                <el-table-column prop="logTitle" align="center" label="更新标题" />
                <el-table-column prop="logData" align="center" label="更新内容" />
                <el-table-column prop="logTime" align="center" label="更新时间" />
                <el-table-column align="center" label="功能">
                    <template #default="scope">
                        <div style="display: flex; gap: 10px; justify-content: center;">
                            <el-button :icon="Delete" circle @click="delUpdateLog(scope.row.id)"
                                class="el_button_danger" type="danger">
                            </el-button>
                            <el-button :icon="Edit" circle style="margin-left: 0;" @click="changeUpdateLog(scope.row)"
                                class="el_button_primary" type="primary">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog @close="dontChange" class="el_dialog" v-model="dialogFlag" width="500" align-center>
            <template #header>
                <p class="DialogTittle">新建/修改更新日志</p>
            </template>
            <div class="SetUpdateLogCont">
                <el-input v-model="updateData.logVersion" class="el_input" placeholder="请输入此次更新版本"></el-input>
                <el-input v-model="updateData.logTitle" class="el_input" placeholder="请输入此次更新标题"></el-input>
                <el-input v-model="updateData.logData" :autosize="{ minRows: 10, maxRows: 10 }" :show-word-limit="true"
                    class="el_textarea" placeholder="请输入此次更新内容" type="textarea"></el-input>
                <div>
                    <el-button @click="dontChange" type="danger" class="el_button_danger">取消</el-button>
                    <el-button @click="UpdateLogCiallo" type="primary" class="el_button_primary">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang='js' name=''>
import getUpdateLogAPI from '@/api/main/UpdateLog/getUpdateLog';
import setUpdateLogAPI from '@/api/main/UpdateLog/setUpdateLog';
import delUpdateLogAPI from '@/api/main/UpdateLog/delUpdateLog';
import chaUpdateLogAPI from '@/api/main/UpdateLog/chaUpdateLog';
import showMessage from '@/utils/showMessage';
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
const loading = ref(true)
// dialogFlag
const dialogFlag = ref(false)

// 更新日志列表
const UpdateLog = ref([])
// 已选中日志列表
const ChooseList = ref([])
// 更新日志模板
const updateData = ref({
    id: "",
    logVersion: "",
    logTitle: "",
    logData: ""
})
const changeFlag = ref(false)
const createFlag = ref(false)


// 修改更新日志
function changeUpdateLog(e) {
    dialogFlag.value = true
    updateData.value = e
    changeFlag.value = true
}

// 删除更新日志
async function delUpdateLog(e) {
    const id = e + ""
    const res = await delUpdateLogAPI(id)
    showMessage(res.data.msg, "success")
    getUpdateLog()
}

// 删除所有更新日志
function delAllUpdateLog() {
    if (!ChooseList.value.length) {
        showMessage("未选中任何内容")
    } else {
        let idList = ""
        for (const i in ChooseList.value) {
            idList += ChooseList.value[i].id
            idList += ","
        }
        delUpdateLog(idList.slice(0, -1))
    }
}
// 取消新建/修改更新日志
function dontChange() {
    changeFlag.value = false
    createFlag.value = false
    dialogFlag.value = false
    updateData.value = {
        logVersion: "",
        logTitle: "",
        logData: ""
    }
}

// 检测用户选中更新日志
function changeCheckbox(e) {
    ChooseList.value = e
}

// 新建/修改更新日志
async function UpdateLogCiallo() {
    if (createFlag.value == true && changeFlag.value == false) {
        const res = await setUpdateLogAPI(updateData.value.logTitle, updateData.value.logData, updateData.value.logVersion)
        if (res.data.code == 200) {
            showMessage("添加成功", "success")
            getUpdateLog()
            dontChange()
        } else {
            showMessage("添加失败")
        }
    } else if (createFlag.value == false && changeFlag.value == true) {
        const res = await chaUpdateLogAPI(updateData.value.id, updateData.value.logTitle, updateData.value.logData, updateData.value.logVersion)
        showMessage(res.data.msg, "success")
        getUpdateLog()
        dontChange()
    } else {
        showMessage("无法同时修改/新建日志")
        console.log(createFlag.value)
        console.log(changeFlag.value)
    }
}

// 获取更新日志
async function getUpdateLog() {
    UpdateLog.value = []
    const res = await getUpdateLogAPI()
    showMessage("加载成功","success")
    for (const key in res.data) {
        UpdateLog.value.unshift(res.data[key])
    }
}
getUpdateLog()
</script>

<style scoped>
/* 框架 */
.UpdateLogBG {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 标题 */
.UpdateLogTittle {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

/* 标题内容 */
.UpdateLogMess {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    transition: all 0.5s;
    color: var(--PupdateLog_Tittle);
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.UpdateLogMess>*:nth-child(1) {
    font-size: 22px;
}

/* 内容框 */
.UpdateLogTableBorder {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 表格 */
.UpdateLogTable {
    position: absolute;
    height: 100%;
}

/* Dialog标题 */
.DialogTittle {
    font-size: 16px;
    color: var(--PupdateLog_DialogTittle);
}

/* Dialog内容 */
.SetUpdateLogCont {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.SetUpdateLogCont>div {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.SetUpdateLogCont>div>* {
    width: 100%;
}
</style>